<script setup>
import {onMounted, ref} from "vue";
import {useCounterStore} from "@/stores/counter.js";
import {storeToRefs} from "pinia";

const counterStore = useCounterStore();
onMounted(() => {
  counterStore.getList()
})

const {count, list} = storeToRefs(counterStore);
const {increment} =   (counterStore)
</script>

<template>
  <div>
    {{ counterStore.count }}
    <button @click="counterStore.increment">+</button>
  </div>
  <div>doubleValue: {{ counterStore.doubleValue }}</div>
  <ol>
    <li v-for="item in counterStore.list" :key="item.id">
      {{ item.name }}
    </li>
  </ol>
  <div>{{ count }}
    <button @click="increment">+</button>
  </div>
</template>

<style scoped>

</style>
